<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src='js/echarts.js'></script>
</head>

<body>
    <div id="main1" style="width: 800px; height: 200px"></div>
    <div id="main2" style="width: 800px; height: 200px"></div>
    <script type="text/javascript">
        var traffic1 = echarts.init(document.getElementById("main1"));
        var traffic2 = echarts.init(document.getElementById("main2"));
        var data = [];
        var now = new Date(2020, 5, 2, 24, 60, 60);
        var oneDay = 24 * 600 * 600;  //设置控制x轴上时间的长短
        function randomData() {  //产生随机数据的函数
            now = new Date(+now + oneDay);
            value = Math.random() * 80 + 20;
            return {
                name: now.toLocaleString('chinese', { hour12: false }),
                value: [
                    now.toLocaleString('chinese', { hour12: false }),
                    Math.round(value)
                ]
            }
        }
        for (var i = 0; i < 300; i++) {  //随机生成300个数据，存放在数组data中
            data.push(randomData());
        }
        var option1 = {  //指定图表option1的配置项和数据
            color: ['DarkGreen', 'red', 'LimeGreen', 'blue', 'Purple', 'GreenYellow', 'DarkTurquoise'],
            backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1
            title: { text: '在此图表中滚动鼠标', left: 110, top: 12 },  //配置标题组件
            tooltip: {  //配置提示框组件
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0]; var date = new Date(params.name);
                    return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' +
                        date.getDate() + '日' + ' : ' + params.value[1];
                },
                axisPointer: { animation: false }  //设置坐标轴指示器
            },
            xAxis: { type: 'time', splitLine: { show: false } },  //配置x轴坐标系
            //配置y轴坐标系
            yAxis: { type: 'value', boundaryGap: [0, '100%'], splitLine: { show: false } },
            dataZoom: [  //配置数据区域缩放组件
                {
                    type: 'inside',  //设置两种取值inslide，slide
                    show: true,
                    start: 20,  //设置数据显示的开始位置
                    end: 70,  //设置数据显示的终止位置
                },
            ],
            series: [{ name: '模拟数据', type: 'line', data: data }]  //配置数据系列
        };
        var option2 = {  //指定图表option2的配置项和数据
            color: ['blue', 'LimeGreen', 'red', 'DarkGreen', 'Purple', 'GreenYellow', 'DarkTurquoise'],
            backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1
            title: { text: '此图表与上面同步变化', left: 110, top: 12 },  //配置标题组件
            tooltip: {  //配置提示框组件
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    var date = new Date(params.name);
                    return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' +
                        date.getDate() + '日' + ' : ' + params.value[1];
                },
                axisPointer: { animation: false }  //设置坐标轴指示器
            },
            xAxis: { type: 'time', splitLine: { show: false } },  //配置x轴坐标系
            //配置y轴坐标系
            yAxis: { type: 'value', boundaryGap: [0, '100%'], splitLine: { show: false } },
            dataZoom: [  //配置数据区域缩放组件
                {
                    type: 'inside',  //设置两种取值inslide，slide
                    show: true,
                    start: 0,  //设置数据显示的开始位置
                    end: 100,  //设置数据显示的终止位置
                },],
            series: [{ name: '模拟数据', type: 'bar', data: data }]  //配置数据系列
        };
        traffic1.setOption(option1);  //使用指定的配置项和数据以显示图表
        traffic2.setOption(option2);  //使用指定的配置项和数据以显示图表
        traffic1.on('datazoom', function (params) {
            console.log(params);
            var startValue = traffic1.getModel().option.dataZoom[0].startValue;
            var endValue = traffic1.getModel().option.dataZoom[0].endValue;
            //获得起止位置百分比
            var startPercent = traffic1.getModel().option.dataZoom[0].start;
            var endPercent = traffic1.getModel().option.dataZoom[0].end;
            console.log(startValue, endValue, startPercent, endPercent);
            option2.dataZoom[0].start = startPercent;
            option2.dataZoom[0].end = endPercent;
            traffic2.setOption(option2);
        });

    </script>
</body>

</html>